<template>
  <div class="monitorList">
    <!-- 顶部统计 -->
    <statistics :monitor-info="monitorInfo"></statistics>

    <!-- 表格数据 -->
    <div class="list-table">
      <listSearch @search="search">
        <!--                <template slot="handle">
                                    <el-button type="primary" plain @click="createReport">生成报告</el-button>
                                </template>-->
      </listSearch>
      <div class="state-wrap">
        <span class="dot red"></span><span class="text">未完成标准</span>
        <span class="dot green"></span><span class="text">已完成标准</span>
        <span class="dot blue"></span><span class="text">已完成目标</span>
      </div>
      <list :isStart="false" :showFiled="filed" :tableData="tableData" :total="total" :isUpdateVal="true" :isUpdateCorrectVal="true" @changePage="changePage" @closeWarning="closeWarning" @updateHandworkMaintainValue="updateHandworkMaintainValue" @updateCorrectValue="updateCorrectValue">
      </list>
    </div>

    <!-- 更新当前值 -->
    <updateVal v-if="dialogParams.visible" :dialog-params="dialogParams" @getList="getList"></updateVal>
    <update-correct-val v-if="CorrectDialogParams.visible" :dialog-params="CorrectDialogParams" @getList="getList"></update-correct-val>
    <!-- 关闭预警 -->
    <closeWarning :dialog-params="dialogParams" @getList="getList"></closeWarning>
  </div>
</template>

<script>
import statistics from '@/components/statistics/index'
import list from '@/components/cardToList/list'
import listSearch from '@/components/search/listSearch'
import updateVal from './module/updateVal'
import updateCorrectVal from './module/updateCorrectVal'
import { getMyPointList } from '@/api/target'
import { filterParams } from '@/config/utils'
import { getMonitorInfo } from '@/api/improve'
import { createReport } from '@/api/report'
import closeWarning from './module/closeWarning'

export default {
  name: 'myDomList',
  components: {
    statistics,
    list,
    listSearch,
    updateVal,
    updateCorrectVal,
    closeWarning
  },
  data () {
    return {
      filed: ['standardValue', 'targetValue', 'handworkMaintainValue', 'personnelTrainingState', 'autoUpdateValue', 'correctValue', 'state', 'warningCount'],
      searchFrom: {
        targetStandardId: '',
        indexOne: '',
        indexTwo: '',
        indexThree: '',
        name: '',
        pageSize: 10,
        pageIndex: 1
      },
      tableData: [],
      total: 0,
      // 质控点统计
      monitorInfo: {},
      // 更新当前值
      dialogParams: {
        visible: false,
        id: ''
      },
      CorrectDialogParams: {
        visible: false,
        id: ''
      }
    }
  },
  created () {
    this.searchFrom.targetStandardId = this.$route.query.id
    this.getList()
    this.getMonitorInfo()
  },
  methods: {
    // 搜索
    search (searchFrom) {
      this.searchFrom.pageIndex = 1
      this.searchFrom.indexOne = searchFrom.indexOne
      this.searchFrom.indexTwo = searchFrom.indexTwo
      this.searchFrom.indexThree = searchFrom.indexThree
      this.searchFrom.name = searchFrom.name
      this.getList()
    },
    // 获取表格数据
    getList () {
      const params = filterParams(this.searchFrom)
      getMyPointList(params)
        .then(res => {
          this.tableData = res.dataList || []
          this.total = res.total || 0
        })
        .catch(() => {})
    },
    // 获取顶部质控点统计信息
    getMonitorInfo () {
      getMonitorInfo({ targetStandardId: this.searchFrom.targetStandardId })
        .then(res => {
          this.monitorInfo = res || {}
        })
        .catch()
    },
    // 生成报告
    createReport () {
      this.$confirm('您确定要生成报告吗?', '生成报告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const params = {
            targetStandardId: +this.searchFrom.targetStandardId
          }
          createReport(params)
            .then(res => {
              this.$message.success('操作成功')
            })
            .catch(() => {})
        })
        .catch()
    },
    // 切换分页
    changePage (searchForm) {
      this.searchFrom.pageIndex = searchForm.pageIndex
      this.searchFrom.pageSize = searchForm.pageSize
      this.getList()
    },
    // 关闭预警
    closeWarning (id) {
      if (id) {
        this.dialogParams = {
          visible: true,
          id: id
        }
      } else {
        this.$message.warning('请选择需要关闭的质控点')
      }
    },
    // 更新当前值
    /*            updateCurrentValue(type, row) {
                        this.dialogParams = {
                            visible: true,
                            id: row.id,
                            targetStandardId: row.targetStandardId,
                            currentValue: row.currentValue
                        }
                    }, */
    updateHandworkMaintainValue (type, row) {
      this.dialogParams = {
        visible: true,
        id: row.id,
        targetStandardId: row.targetStandardId,
        handworkMaintainValue: row.handworkMaintainValue
      }
    },
    updateCorrectValue (type, row) {
      this.CorrectDialogParams = {
        visible: true,
        id: row.id,
        startValue: row.startValue,
        correctValue: row.correctValue,
        cumulativeValue: row.cumulativeValue,
        chargeCategory: row.chargeCategory
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.list-table {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid $lineColor;
}
.state-wrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 5px 0;
  .text {
    margin-left: 3px;
    margin-right: 12px;
  }
  .text:last-child {
    margin-right: 0;
  }
}
.dot {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 100%;
}

.dot.red {
  background: $red;
}
.dot.green {
  background: $green;
}
.dot.blue {
  background: $blue;
}
</style>
